<template>
	<view class="navbar">
		<view v-for="(item, index) in navList" class="nav-item" @click="tabClick(index)" :key="index" :class="{current: tabCurrentIndex == index}">
			{{item.text}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabCurrentIndex: {
				type: Number,
				required: true
			},
			navList: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			tabClick(index) {
				this.$emit('change',index)
			}
		}
	}
</script>

<style lang="scss">
	.navbar {
		display: flex;
		width: 750rpx;
		height: 68rpx;
		padding: 0 5px;
		background: #fff;
		border-radius: 10px 10px 0px 0px;
		position: absolute;
		border-bottom: 2rpx solid #FAFAFA;
		top: 0;
		z-index: 10;
		// border-bottom: 2rpx solid #eee;
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28rpx;
			color: #333;
			font-family:Noto Sans S Chinese;
			position: relative;
			font-weight: 500;
			&.current {
				color: #42ADFF;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 110rpx;
					height: 0;
					border-bottom: 4rpx solid #42ADFF;
				}
			}
		}
	}
</style>
